<template>
	<el-container class="container">
		<el-aside class="aside">
			<el-menu
				class="menu el-menu-vertical-demo"
				:default-active="$route.path"
				:collapse="isCollapse"
				background-color="#545c64"
				text-color="#fff"
				active-text-color="#ffd04b"
				router
			>
				<div class="logo"><router-link to="/">logo</router-link></div>
				<el-submenu index="1">
					<template slot="title">
						<i class="el-icon-location"></i>
						<span slot="title">导航一</span>
					</template>
					<el-menu-item-group>
						<span slot="title">列表</span>
						<el-menu-item index="/list">列表1</el-menu-item>
						<el-menu-item index="/list2">列表2</el-menu-item>
					</el-menu-item-group>
					<el-menu-item-group title="分组2">
						<el-menu-item index="1-3">选项3</el-menu-item>
					</el-menu-item-group>
					<el-submenu index="1-4">
						<span slot="title">选项4</span>
						<el-menu-item index="1-4-1">选项1</el-menu-item>
					</el-submenu>
				</el-submenu>
				<el-menu-item index="2">
					<i class="el-icon-menu"></i>
					<span slot="title">导航二</span>
				</el-menu-item>
				<el-menu-item index="3" disabled>
					<i class="el-icon-document"></i>
					<span slot="title">导航三</span>
				</el-menu-item>
				<el-menu-item index="4">
					<i class="el-icon-setting"></i>
					<span slot="title">导航四</span>
				</el-menu-item>
			</el-menu>
			
		</el-aside>
		<el-container>
			<el-header style="text-align: right; font-size: 12px">
				
				<div class="tools" @click.prevent="collapse">
					<i class="el-icon-s-fold" :class="isCollapse?'menu-tools-t':'menu-tools-f'"></i>
				</div>
				
				<el-dropdown style="margin: 0 10px">
					<span>{{ this.sysUserName }} <i class="el-icon-setting"></i></span>
					<el-dropdown-menu slot="dropdown">
						<el-dropdown-item><router-link to="/login">退出</router-link></el-dropdown-item>
						<el-dropdown-item>去首页</el-dropdown-item>
					</el-dropdown-menu>
				</el-dropdown>
				
			</el-header>
			<el-main>
				<template v-if="$route.name != 'name'">
					<div class="main-title">{{ $route.meta.name }}</div>
					<el-breadcrumb separator-class="el-icon-arrow-right" style="float: right;">
						<el-breadcrumb-item :to="{ path: item.path }" v-for="item in $route.meta.titleData">{{ item.title }}</el-breadcrumb-item>
					</el-breadcrumb>
				</template>
				
				<transition name="fade" mode="out-in">
					<router-view></router-view>
				</transition>
			</el-main>
			<el-footer>Footer</el-footer>
		</el-container>
	</el-container>
</template>

<script>
	export default {
		name: "home",
		components: {},
		computed: {},
		data() {
			return {
				isCollapse: false,
				sysUserName:''
			}
		},
		methods: {
			collapse(){
				this.isCollapse = !this.isCollapse;
			},
			handleOpen(key, keyPath) {
				console.log(key, keyPath);
			},
			handleClose(key, keyPath) {
				console.log(key, keyPath);
			},
			handleSelect(key, keyPath) {
				console.log(key, keyPath);
			},
			showUser(){
				let user = sessionStorage.getItem('user');
				if (user) {
					user = JSON.parse(user);
					this.sysUserName = user.name || '';
				}
			}
		},
		mounted() {
			this.showUser();
		}
	}
</script>

<style scoped lang="scss">
	.container{
		position: absolute;
		top: 0px;
		bottom: 0px;
		left: 0;
		right: 0;
		width: 100%;
	}
	.aside{width: auto!important;}
	.menu{height: 100%;overflow: hidden;}
	.el-menu-vertical-demo:not(.el-menu--collapse) {
		width: 229px;
	}
	.logo{height: 60px;background-color: #B3C0D1;text-align: center;line-height: 60px;}
	.el-header {
		background-color: #B3C0D1;
		color: #333;
		line-height: 60px;
		position: relative;
	}
	.tools{
		position: absolute;
		left: 10px;
		font-size: 20px;
		.tools i{
			transition: 1s;
		}
		.menu-tools-t{
			transform: rotate(-90deg);
		}
		.menu-tools-f{
			transform: rotate(180deg);
		}
	}
	
	.menu-collapsed{
		flex:0 0 65px;
		width: 65px;
		overflow: hidden;
		transition: 1s;
	}
	.menu-expanded{
		flex:0 0 230px;
		width: 230px;
		overflow: hidden;
		transition: 1s;
	}
	.el-footer {
		background-color: #B3C0D1;
		color: #333;
		text-align: center;
		line-height: 60px;
	}
	.main-title{padding-bottom: 20px;font-size: 16px;font-weight: bold;}
</style>